<template>
  <div>
    <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @cancel="handleCancel"
    />
    <div class="cinema">
      <ul>
        <li v-for="item in computedCinemaList" :key="item.cinemaId">
          <div>{{ item.name }}<span style="float: right;margin-right: 10px;color: orangered">{{
              item.lowPrice / 100
            }}￥</span></div>
          <div class="address">{{ item.address }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import {Search} from 'vant';
import {mapActions, mapState} from "vuex";

Vue.use(Search);

export default {
  name: "Search",
  data() {
    return {
      value: '',
      height: 0
    }
  },
  computed: {
    ...mapState('cinemaModule',['cinemaList']),
    ...mapState('cityModule',['cityId']),
    //返回搜索过滤之后的列表
    computedCinemaList() {
      //return this.$store.state.cinemaList
      //将原来的数据按照输入的内容过滤
      if (this.value === '') return []
      return this.cinemaList.filter(item => item.name.toUpperCase().includes(this.value.toUpperCase()) ||
          item.address.toUpperCase().includes(this.value.toUpperCase()))
    },

  },
  mounted() {
    //this.height = document.documentElement.clientHeight - 50 + 'px' //获取设备高度减去底部和头部高度，得到列表显示的高度

    if (this.cinemaList.length === 0) {
      //vuex异步流程
      this.getCinemaList(this.cityId)
    } else {
      console.log('city:缓存')
    }
  },
  methods: {
    ...mapActions('cinemaModule',['getCinemaList']),
    handleCancel() {
      //push：不停的压入栈、back、replace：替换当前路由，不能返回上一个路由
      this.$router.replace('/cinema')
    },
  }
}
</script>

<style scoped lang="scss">
.cinema {
  overflow: hidden;
  position: relative;
  background-color: white;

  li {
    margin: 10px 10px 26px 10px;
  }

  .address {
    font-size: 13px;
    color: gray;
  }
}
</style>